import React from 'react'
import { BrowserRouter as Router, Route ,NavLink} from 'react-router-dom'

class Home extends React.Component{
    render(){
        return (
            <div className="Home">
                Home
            </div>
        )
    }
}
const About = ({match})=>(
    <div className="About">
        About-Route={JSON.stringify(match)}
    </div>
)
const Blog = ({match})=>(
    <div className="Blog">
        Blog-Route.params={JSON.stringify(match.params)}
    </div>
)

class Darius extends React.Component{
    render(){
        return(
            <Router>
                <div className="page">
                    <h1>Darius's Page</h1>
                    <ul>
                        <li><NavLink exact to="/" activeClassName="selected">Home</NavLink></li>
                        <li><NavLink to="/blog/1" activeClassName="selected">Blog</NavLink></li>
                        <li><NavLink to={{pathname:'/about',params:{id:1},query:{page:1}}} isActive={oddEvent} activeClassName="selected">About</NavLink></li>
                    </ul>
                    <hr/>

                    <Route exact path="/" component={Home}/>
                    {/*<IndexRoute component={Home}/>*/}
                    {/*<Route exact path="/" render={()=>(<h3>Home</h3>)}/>*/}
                    <Route path="/blog/:id" component={Blog}/>
                    <Route path="/about" component={About}/>
                </div>
            </Router>
        )
    }
}

const oddEvent = (match, location) => {
    console.log(`match:${JSON.stringify(match)},location:${JSON.stringify(location)}`)
    if (!match) {
        return false
    } else{
        return true;
    }
}

export default Darius